<template>
  <div id="head1">
    <div id="left-eye" class="eye">
      <div id="left-pupil" class="pupil"></div>
    </div>
    <div id="right-eye" class="eye">
      <div id="right-pupil" class="pupil"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
  document.addEventListener('mousemove', function (event) {
    var head: any = document.getElementById('head1');
    var headRect = head.getBoundingClientRect();

    var mouseX = event.clientX;
    var mouseY = event.clientY;

    var centerX = headRect.left + headRect.width / 2;
    var centerY = headRect.top + headRect.height / 2;

    var deltaX = mouseX - centerX;
    var deltaY = mouseY - centerY;

    // var maxDelta = Math.sqrt((headRect.width / 2) ** 2 + (headRect.height / 2) ** 2);
    var maxDelta = 8;
    var scale = Math.min(maxDelta / Math.sqrt(deltaX ** 2 + deltaY ** 2), 1);

    var pupilLeft: any = document.getElementById('left-pupil');
    var pupilRight: any = document.getElementById('right-pupil');

    pupilLeft.style.transform = 'translate(' + deltaX * scale + 'px, ' + deltaY * scale + 'px)';
    pupilRight.style.transform = 'translate(' + deltaX * scale + 'px, ' + deltaY * scale + 'px)';
  });
})
</script>

<style lang="scss" scoped>
#head1 {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #d5cbea;
  margin: 0 auto;
}

.eye {
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: white;
  border-radius: 50%;
  top: 35px;
}

#left-eye {
  left: 16px;
}

#right-eye {
  right: 16px;
}

.pupil {
  position: relative;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: black;
  border-radius: 50%;
  z-index: 999;
}
</style>